<!--
 * @Description: 
 * @Author: charles
 * @Date: 2022-01-08 11:17:05
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-09 15:19:53
-->
<template>
    <!-- 设备管理 -->
    <div class="device">
        <!-- 头部 -->
        <div class="header">
            <el-select v-model="onlineStatus" clearable placeholder="请选择设备在线状态">
                <el-option label="离线" value="离线"></el-option>
                <el-option label="在线" value="在线"></el-option>
            </el-select>
            <el-select v-model="bdStatus" clearable placeholder="请选择设备绑定状态" style="margin:0 10px">
                <el-option v-for="item in bdStatusOpt" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <el-input placeholder="请输入内容" v-model="inputVal" clearable style="width:180px">
            </el-input>
    
            <el-button type="success" style="margin:0 10px">搜索</el-button>
            <el-button type="success" style="float:right" @click="showDrawer">录入</el-button>
        </div>
        <!-- 表格 -->
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column type='index' :index='1' label="序号" width="90" align='center'>
            </el-table-column>
            <el-table-column prop="serial_number" label="编号" min-width="100" align='center'>
            </el-table-column>
            <el-table-column prop="name" label="名称" min-width="100" align='center'>
            </el-table-column>
            <el-table-column prop="online_status" label="在线状态" min-width="100" align='center'>
              <template slot-scope="scope">
                <el-tag type="danger" v-if="scope.row.online_status == 0">
                    {{scope.row.online_status == 0 ?'离线':'在线'}}
                </el-tag>
                <el-tag type="success" v-if="scope.row.online_status == 1">
                    {{scope.row.online_status == 0 ?'离线':'在线'}}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="bind_status" label="绑定状态" min-width="100" align='center'>
              <template slot-scope="scope">
                <el-tag type="danger" v-if="scope.row.bind_status == 0">
                  {{scope.row.bind_status == 0 ?'未绑定':'已绑定'}}
                </el-tag>
                <el-tag type="success" v-if="scope.row.bind_status == 1">
                  {{scope.row.bind_status == 0 ?'未绑定':'已绑定'}}
                </el-tag>

              </template>
            </el-table-column>
            <el-table-column  label="操作" width="150" align='center'>
              <template slot-scope="scope">
                <el-button type="text" @click="editBtn(scope.row)">修改</el-button>
                <el-button type="text" @click="deleteBtn(scope.row.id)" style="color:red">删除</el-button>
              </template>
            </el-table-column>
        </el-table>
    
        <!-- 抽屉 -->
        <el-drawer :title="title" :visible.sync="drawer" direction="rtl" :before-close="handleClose" size="50%">
            
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="padding:10px">
                
                <el-form-item label="编号" prop="serial_number">
                    <el-input v-model="ruleForm.serial_number" style="width:200px"></el-input>
                </el-form-item>
    
                <el-form-item label="名称" prop="name">
                    <el-input v-model="ruleForm.name" style="width:200px"></el-input>
                </el-form-item>
    
                <el-form-item>
                    <el-button @click="drawer = false">取消</el-button>
                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                </el-form-item>
            </el-form>
            
        </el-drawer>
    
    
    
    
    </div>
</template>

<script>
import { get,postJSON,del } from "../../utils/request"

export default {
    data() {
        return {
            onlineStatus: '',
            bdStatus: '',
            bdStatusOpt: [{
                label: '未绑定',
                value: '未绑定'
            }, {
                label: '已绑定',
                value: '已绑定'
            }],
            inputVal: '',
            tableData: [],
            drawer: false,
            ruleForm: {
              serial_number: '',
              name: '',
              id:''
            },
            rules: {
              serial_number: [
                { required: true, message: '请输入编号', trigger: 'blur' },
              ],
              name: [
                { required: true, message: '请输入名称', trigger: 'blur' },
              ]
            },
            title:''



        }
    },
    created() {
        this.getDeviceList()
    },
    methods: {
        // 查询设备列表
        getDeviceList() {
            get('/device/pageQuery', {
                page: 1,
                pageSize: 10,
                name: '',
                bind_status: '',
                online_status: ''
            }).then(res => {
                if (res && res.status == 200 && res.data && res.data.list) {
                    this.tableData = res.data.list
                } else {
                    this.tableData = []
                }
            })

        },
        // 修改设备信息
        editBtn(row){
          console.log(7777, row);
          this.drawer = true
          this.title = '修改设备信息'
          this.ruleForm={
            serial_number:row.serial_number,
            name:row.name,
            id:row.id
          }
        },

        // 保存或者更新 设备
        addDevice(){
          postJSON('/device/saveOrUpdate',this.ruleForm).then(res=>{
            console.log(8888, res);
          })
        },

        //删除 信息
        deleteBtn(id){
          del('/device/deleteById',{
            id:id
          }).then(res=>{
            console.log(666, res);
            if(res && res.status == 200){
               this.$notify({
                  title: '成功',
                  message: '设备信息删除成功',
                  type: 'success'
                });
                this.getDeviceList()
            }else{
              this.$notify.error({
                title: '错误',
                message: '设备信息删除失败'
              });

            }
          })

        },

        

        // 打开抽屉
        showDrawer(){
          this.drawer = true
          this.title = '添加设备信息'
          this.ruleForm={}
          this.$refs['ruleForm'].resetFields()
        },
        // 关闭抽屉
        handleClose(done) {
            done();
            // this.$confirm('确认关闭？').then(_ => {
            //     done();
            // }).catch(_ => {});
        },


        // 提交
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    postJSON('/device/saveOrUpdate',this.ruleForm).then(res=>{
                      console.log(8888, res);
                      if(res && res.status == 200){
                        if(this.ruleForm.id){
                           this.$notify({
                              title: '成功',
                              message: '设备信息修改成功',
                              type: 'success'
                            });

                        }else{
                           this.$notify({
                              title: '成功',
                              message: '设备信息添加成功',
                              type: 'success'
                            });
                        }
                        this.drawer = false
                        this.getDeviceList()


                      }else{
                        this.$notify.error({
                          title: '错误',
                          message: '设备信息添加失败'
                        });
                      }
                    })

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
       



    }

}
</script>

<style lang="scss" scoped>
.device {
    padding: 5px;
    .header {
        margin-bottom: 10px;
    }
}
</style>